<template>
  <div>

            <table>

                <tr>
                    <td style="padding:5px">
                        用户名：
                    </td>
                    <td style="padding:5px">
                        <input type="text" v-model='username'>
                    </td>

                <tr>
                    <td style="padding:5px">
                        密码：
                    </td>
                    <td style="padding:5px">
                        <input type="text" v-model='password'>
                    </td>

                </tr>
                <tr>
                    <td style="padding:5px">

                    </td>
                    <td style="padding:5px">

                      <drag-verify
                         :width='width'
                        :height='height'
                        :text='text'
                        ref='Verify'>


                      </drag-verify>

                    </td>

                </tr>

                <tr>
                    <td style="padding:5px">

                    </td>
                    <td style="padding:5px">
                        <Button @click="login">登陆</Button>
                        <img style="cursor:pointer;" src="http://localhost:8000/static/dingding.png" @click="ding" />

                    </td>

                </tr>

            </table>


		</div>


</template>



<script>

//导包

import dragVerify from "vue-drag-verify"


export default {
  data () {
    return {

      msg: "这是一个变量",
      username:'',
      password:'',


      //滑块验证码
      text:'请将滑块向右拖动',
      width:300,
      height:40

    }
  },
  //注册组件标签
  components:{
      'dragVerify':dragVerify,
  },

  mounted:function(){



},
  methods:{

    ding:function(){
      //组装url
      let url = 'https://oapi.dingtalk.com/connect/qrconnect?appid=dingoas0flvw1koxnmk1fa&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://127.0.0.1:8000/md_admin/dingding';

             //进行跳转
  			window.location.href = url;

    },

      //提交登陆
      login(){
        //验证是否拖动
        console.log(this.$refs.Verify.isPassing);



          if (this.username == ''){
            //   alert('用户名不能为空');
              this.$Message('用户名不能为空')
              return false;
          }

          if (this.password == ''){
            //   alert('用户名不能为空');
              this.$Message('密码不能为空')
              return false;
          }

          if (this.$refs.Verify.isPassing == false){
            this.$Message('请拖动验证码')
            return false;
          }

          //发送请求
          this.axios.get('http://127.0.0.1:8000/mdlogin/',{params:{username:this.username,password:this.password}}).then((res)=>{
              console.log(res);
              this.$Message(res.data.message);
            if(res.data.code==200){

              //将用户名和id存储到localstorage
              localStorage.setItem('username',res.data.username);
              localStorage.setItem('uid',res.data.uid);

            }
          });

      },



  }
}


</script>

<style>



</style>
